<template>
  <div>
    <el-page-header @back="goBack" content="运费模板详情" style="color:#3198ff"></el-page-header>
    <div style="margin-top: 30px;">
      <el-row :gutter="20">
        <el-col :span="15">
          <div class="form-item">
            <span class="title">包邮条件：</span>
            <span class="title" style="min-width:40px">1.满</span>
            <el-input-number
              placeholder="请输入"
              v-model="Mnumber"
              :min="0"
              :max="1000000000"
              :precision="0"
              :step="1"
              controls-position="right"
            ></el-input-number>
            <span class="title" style="min-width:50px;margin-left:10px">件</span>
            <span class="title" style="min-width:40px">2.满</span>
            <el-input-number
              placeholder="请输入"
              v-model="Mprice"
              :min="0"
              :max="1000000000"
              :precision="1"
              :step="0.1"
              controls-position="right"
            ></el-input-number>
            <span class="title" style="min-width:40px;margin-left:10px">元</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item button-container">
            <span class="title">邮费明细：</span>
            <el-button type="primary" @click="add" icon="el-icon-circle-plus-outline">新增明细</el-button>
          </div>
        </el-col>
      </el-row>

      <div style="margin-top: 50px">
        <el-table
          ref="multipleTable"
          border
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="title" label="省份" width="300">
            <template slot-scope="scope">
              <el-select v-model="scope.row.provinceName" placeholder="请选择">
                <el-option
                  v-for="dict in citys"
                  :key="dict.dictValue"
                  :value="dict.dictValue"
                  :label="dict.dictLabel"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="skuCount" label="商品数量">
            <template slot-scope="scope">
              <el-input-number
                type="number"
                :min="0"
                controls-position="right"
                v-model="scope.row.num"
                :precision="0"
                :step="1"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="对应邮费">
            <template slot-scope="scope">
              <el-input-number
                type="number"
                :min="0"
                controls-position="right"
                v-model="scope.row.freight"
                :precision="1"
                :step="0.1"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="设置固定邮费">
            <template slot-scope="scope">
              <el-input-number
                type="number"
                :min="0"
                controls-position="right"
                v-model="scope.row.fixedFreight"
                :precision="1"
                :step="0.1"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-popconfirm title="确定删除此？" @onConfirm="handleClickDelete(scope.$index)">
                <el-button style="margin-left:15px" size="small" type="text" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 50px">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="form-item">
              <span class="title">
                <span style="color:#F56C6C">*</span>模板名称：
              </span>
              <el-input placeholder="请输入名称" maxlength="25" v-model="MUname"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <div class="form-item">
              <span class="title">
                <span style="color:#F56C6C">*</span>备注：
              </span>
              <el-input type="textarea" :rows="5" maxlength="50" placeholder v-model="MUMark"></el-input>
            </div>
          </el-col>
        </el-row>
        <div style="text-align:center; margin-top: 50px;">
          <el-button type="primary" @click="submitForm()">修改</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      Mnumber: "",
      Mprice: "",
      tableData: [],
      MUname: "",
      MUMark: "",
      citys: [
        {
          dictValue: "北京",
          dictLabel: "北京"
        },
        {
          dictValue: "天津",
          dictLabel: "天津"
        },
        {
          dictValue: "河北",
          dictLabel: "河北"
        },
        {
          dictValue: "辽宁",
          dictLabel: "辽宁"
        },
        {
          dictValue: "吉林",
          dictLabel: "吉林"
        },
        {
          dictValue: "黑龙江",
          dictLabel: "黑龙江"
        },
        {
          dictValue: "山东",
          dictLabel: "山东"
        },
        {
          dictValue: "江苏",
          dictLabel: "江苏"
        },
        {
          dictValue: "上海",
          dictLabel: "上海"
        },
        {
          dictValue: "浙江",
          dictLabel: "浙江"
        },
        {
          dictValue: "安徽",
          dictLabel: "安徽"
        },
        {
          dictValue: "福建",
          dictLabel: "福建"
        },
        {
          dictValue: "江西",
          dictLabel: "江西"
        },
        {
          dictValue: "广东",
          dictLabel: "广东"
        },
        {
          dictValue: "广西",
          dictLabel: "广西"
        },
        {
          dictValue: "海南",
          dictLabel: "海南"
        },
        {
          dictValue: "河南",
          dictLabel: "河南"
        },
        {
          dictValue: "湖南",
          dictLabel: "湖南"
        },
        {
          dictValue: "湖北",
          dictLabel: "湖北"
        },
        {
          dictValue: "山西",
          dictLabel: "山西"
        },
        {
          dictValue: "内蒙古",
          dictLabel: "内蒙古"
        },
        {
          dictValue: "宁夏",
          dictLabel: "宁夏"
        },
        {
          dictValue: "青海",
          dictLabel: "青海"
        },
        {
          dictValue: "陕西",
          dictLabel: "陕西"
        },
        {
          dictValue: "甘肃",
          dictLabel: "甘肃"
        },
        {
          dictValue: "新疆",
          dictLabel: "新疆"
        },
        {
          dictValue: "四川",
          dictLabel: "四川"
        },
        {
          dictValue: "贵州",
          dictLabel: "贵州"
        },
        {
          dictValue: "云南",
          dictLabel: "云南"
        },
        {
          dictValue: "重庆",
          dictLabel: "重庆"
        },
        {
          dictValue: "西藏",
          dictLabel: "西藏"
        },
        {
          dictValue: "香港",
          dictLabel: "香港"
        },
        {
          dictValue: "澳门",
          dictLabel: "澳门"
        },
        {
          dictValue: "台湾",
          dictLabel: "台湾"
        }
      ],
      freightId: ""
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {
    this.freightId = this.$route.query.id;
    this.initData();
  },
  methods: {
    initData() {
      this.$service.freightDetails(this.freightId).then(res => {
        if (res.code == "00000") {
          var item = res.data;
          this.Mnumber = item.freightDetails.freeNum;
          this.Mprice = item.freightDetails.freeMoney;
          this.MUname = item.freightDetails.name;
          this.MUMark = item.freightDetails.remark;
          this.tableData = item.postageDetailsList;
          for (let j = 0; j < this.tableData.length; j++) {
            var item = this.tableData[j];
            item.freight = item.freight / 100;
            item.fixedFreight = item.fixedFreight / 100;
          }
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    goBack() {
      this.$router.back();
    },
    add() {
      var list = {
        provinceName: "",
        num: 0,
        freight: 0,
        fixedFreight: 0
      };
      this.tableData.push(list);
    },
    handleClickDelete(e) {
      this.tableData.splice(e, 1);
    },
    submitForm() {
      var param = {
        freightTemplate: {},
        areaFreightList: []
      };
      //加判断
      param.freightTemplate.id = this.freightId;
      param.freightTemplate.userId = this.Global.user.userId;
      param.freightTemplate.freeNum = this.Mnumber;
      param.freightTemplate.freeMoney = this.Mprice * 100;
      if (this.MUname == "") {
        this.$message({
          message: "请填写模板名称",
          type: "warning"
        });
        return;
      } else {
        param.freightTemplate.name = this.MUname;
      }
      if (this.MUMark == "") {
        this.$message({
          message: "请填写模板备注",
          type: "warning"
        });
        return;
      } else {
        param.freightTemplate.remark = this.MUMark;
      }
      if (this.tableData.length == 0) {
        this.$message({
          message: "请添加明细",
          type: "warning"
        });
        return;
      } else {
        for (let i = 0; i < this.tableData.length; i++) {
          var item = this.tableData[i];
          if (item.provinceName == "") {
            this.$message({
              message: "省份不能为空",
              type: "warning"
            });
            return;
          }
          // else if (item.num == 0) {
          //   this.$message({
          //     message: "商品数量不能为0",
          //     type: "warning"
          //   });
          //   return;
          // }
          else if (item.freight == undefined) {
            this.$message({
              message: "对应邮费不能为空",
              type: "warning"
            });
            return;
          } else if (item.fixedFreight == undefined) {
            this.$message({
              message: "设置固定邮费不能为空",
              type: "warning"
            });
            return;
          }
        }
        param.areaFreightList = JSON.parse(JSON.stringify(this.tableData));
        for (let j = 0; j < param.areaFreightList.length; j++) {
          var item = param.areaFreightList[j];
          item.freight = item.freight * 100;
          if (item.fixedFreight == 0) {
            item.fixedFreight = null;
          } else {
            item.fixedFreight = item.fixedFreight * 100;
          }
        }
      }

      this.$service.updateFreight(param).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.$router.back();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    handleSelectionChange() {}
  },
  watch: {}
};
</script>
<style scoped>
</style>